<template>
  <nav aria-label="Page navigation example">
      <ul class="pagination justify-content-center">
          <li class="page-item" v-for="p in pages" v-bind:class="p == current ? 'disabled' : ''" @click="p != current ? $emit('page-change', p) : ''">
              <a class="page-link" href="javascript:;">{{p}}</a>
          </li>
      </ul>
  </nav>
</template>

<script>
  import common from '../utils/common.js'
  export default {
    name: 'PageList',
    props: ['total', 'current', 'pageSize'],
    methods: {
      calPage() {
        this.pages = common.calPage(PAGE_WINDOW_SIZE, this.current, this.pageSize, this.total)
      }
    },
    watch: {
      current: {
        handler: function (to, from) {
          this.calPage();
        },
      },
      total: {
        handler: function (to, from) {
          this.calPage();
        },
      }
    },
    data() {
      return {
        pages: [],
      }
    }
  }
</script>

<style>
</style>
